Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.rounded-tab {
  --r: .8em; /* control the curvature*/
  
  border-inline: var(--r) solid #0000;
  border-radius: calc(2*var(--r)) calc(2*var(--r)) 0 0/var(--r);
  mask: 
    radial-gradient(var(--r) at var(--r) 0,#0000 98%,#000 101%)
      calc(-1*var(--r)) 100%/100% var(--r) repeat-x,
    conic-gradient(#000 0 0) padding-box;
}
.rounded-tab.left {
  border-left-width: 0;
  border-top-left-radius: var(--r);
}
.rounded-tab.right {
  border-right-width: 0;
  border-top-right-radius: var(--r);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  gap: 30px;
  place-content: center;
  place-items: center;
}

.rounded-tab { 
  font-family: system-ui, sans-serif;
  font-size: 45px;
  font-weight: bold;
  color: #fff;
  line-height: 1.8; /* control the height */
  padding-inline: .5em;
  background: linear-gradient(60deg, #BD5532, #601848) border-box; /* border-box is mandatory */
}

Frontend Forever App